<template>
	<view>
		<nav-bar></nav-bar>
		<view class="tab-list">
			<!-- <u-sticky bgColor="#fff"> -->
			<u-tabs class="tabs-change" @click="handlerClick" :list="tabList" lineColor="#0f559f" :activeStyle="{
						color: '#0f559f',
						fontWeight: 'bold',
						transform: 'scale(1.05)'
					}" :inactiveStyle="{
						color: '#606266',
						transform: 'scale(1)'
					}" itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;">
			</u-tabs>
			<!-- </u-sticky> -->

			<order-list class="order-list" :order-list="orderList" :key="flag"></order-list>
		</view>
	</view>
</template>

<script>
	import navBar from '../../components/nav-bar/nav-bar.vue'
	import orderList from './order-list/order-list.vue'
	export default {
		components: {
			navBar,
			orderList
		},
		data() {
			return {
				flag: false,
				orderList: [{
					trackingNumber: 'A0001',
					type: '打包',
					shopName: '广东广州天河花城汇店',
					schedule: '制作中',
					products: [{
						cover: 'https://img.zcool.cn/community/01174d5a95fbfda801219231c10434.jpg@1280w_1l_2o_100sh.jpg',
						productName: '山野栀子',
						price: '20',
						number: 2,
						capacity: '大杯',
						ice: '标准冰',
						sugar: '少糖',
					}, {
						cover: 'https://img.zcool.cn/community/01174d5a95fbfda801219231c10434.jpg@1280w_1l_2o_100sh.jpg',
						productName: '山野栀子',
						price: '20',
						number: 2,
						capacity: '大杯',
						ice: '标准冰',
						sugar: '少糖',
					}],
				}, {
					trackingNumber: 'A0002',
					type: '自取',
					shopName: '广东广州天河花城汇店',
					schedule: '已完成',
					products: [{
						cover: 'https://img.zcool.cn/community/01174d5a95fbfda801219231c10434.jpg@1280w_1l_2o_100sh.jpg',
						productName: '山野栀子',
						price: '20',
						number: 1,
						capacity: '大杯',
						ice: '标准冰',
						sugar: '少糖',
					}],
				}, {
					trackingNumber: 'A0003',
					type: '打包',
					shopName: '广东广州天河花城汇店',
					schedule: '已完成',
					products: [{
						cover: 'https://img.zcool.cn/community/01174d5a95fbfda801219231c10434.jpg@1280w_1l_2o_100sh.jpg',
						productName: '山野栀子',
						price: '20',
						number: 1,
						capacity: '大杯',
						ice: '标准冰',
						sugar: '少糖',
					}],
				}],
				tabList: [{
					name: '全部订单',
				}, {
					name: '门店订单',
				}, {
					name: '券包订单'
				}],
			}
		},
		methods: {
			handlerClick() {
				this.flag = !this.flag
				this.orderList.push({
					type: '自取',
					shopName: '广东广州天河花城汇店',
					schedule: '已完成',
					products: [{
						cover: 'https://img.zcool.cn/community/01174d5a95fbfda801219231c10434.jpg@1280w_1l_2o_100sh.jpg',
						productName: '山野栀子',
						price: '20',
						number: 1,
						capacity: '大杯',
						ice: '标准冰',
						sugar: '少糖',
					}],
				}, )
			},
		},
	}
</script>

<style scoped lang="scss">
	.tab-list {
		padding-top: 20rpx;

		.tabs-change {
			position: fixed;
			width: 100%;
			height: 80rpx;
			top: 88rpx;
			z-index: 100;
			background-color: white;
		}

		.order-list {
			padding-top: 50rpx;
			padding-bottom: 100rpx;
		}
	}
</style>